<template>
  <div class="plane-contai">
    <div class="imgs_box" v-for="(item, key) in imglist" :key="key" @dblclick="handleDblclick(item)">
      <div class="img-name-and-delete">
        <span class="img-name">{{ item.picName }}</span>
        <span class="delete-btn el-icon-delete" @click="deleteHandle(item.projectPointPicId)"></span>
      </div>
      <el-image v-bind="$attrs" class="image" :src="item.picUrl" :preview-src-list="item.previewList">
      </el-image>
    </div>
  </div>
</template>

<script>
import { getCommonConfig, delProjectPointPic } from '@/api'
export default {
  data() {
    return {
      imglist: [],
    };
  },
  created() {

  },
  computed: {},
  watch: {},
  methods: {
    planeShow(data) {
      this.$nextTick(() => {
        getCommonConfig().then(res => {
          this.imglist = data.map((item) => {
            return {
              ...item,
              picUrl: res.data.inFilePrefix + item.picUrl,
              previewList: [res.data.inFilePrefix + item.picUrl]
            }
          })
        })
        console.log(data);
      });
    },
    deleteHandle(id) {
        this.$emit('deleteId',id)
    },
    // 清空图片列表
    clearList() {
    }
  },

  mounted() {

  },
  destroyed() {
    console.log('destroyed');
  },
  components: {},
}
</script>

<style lang='less' scoped>
.plane-contai {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;

  .imgs_box {
    width: 338px;
    height: 235px;
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: rgba(48, 158, 255, 0.2);
    // border: 1px solid #309eff;
    border: 1px solid rgba(48, 158, 255, 0.2);

    padding: 12px;

    &::after {
      position: absolute;
      top: 3px;
      left: 3px;
      content: "";
      border-top: 5px solid rgba(48, 158, 255, 0.7);
      border-right: 5px solid transparent;
      border-bottom: 5px solid transparent;
    }

    &::before {
      position: absolute;
      top: 3px;
      right: 3px;
      content: "";
      border-top: 5px solid rgba(48, 158, 255, 0.7);
      border-left: 5px solid transparent;
      border-bottom: 5px solid transparent;
    }

    .image {
      width: 100% !important;
      height: 100% !important;
    }

    .img-name-and-delete {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;

      .img-name {
        font-size: 14px;
        color: #fff;
      }

      .delete-btn {
        font-size: 14px;
        color: #fff;
        cursor: pointer;
      }
    }
  }
}</style>